<template>
	<div class="error-page">
		<div class="text"></div>
		<div class="text-mt">
			<span>404</span>
			<span>OOps...</span>
			<span>Something Went Wrong</span>
		</div>
		<div class="home-btn" @click="$router.push('/')">Back To Home</div>
	</div>
</template>

<script>
export default {
	computed: {},
	data() {
		return {}
	},
	computed: {},
}
</script>

<style lang="less" scoped>
.error-page {
	width: 100%;
	height: 100%;
	background: url('https://static.horwincloud.com/ow-202311/pc-bg.png') no-repeat center center;
	background-size: 100% 100%;
	position: relative;
	.text {
		width: 432px;
		height: 429px;
		background: url('@/assets/images/404/404-text.png') no-repeat center center;
		position: absolute;
		top: 259px;
		left: 50%;
		transform: translateX(-50%);
	}
	.text-mt {
		display: none;
	}
	.home-btn {
		cursor: pointer;
		text-align: center;
		font-family: Play-Regular;
		font-size: 16px;
		font-style: normal;
		width: 294px;
		height: 44px;
		border: 1px solid #ffffff;
		color: #ffffff;
		line-height: 44px;
		position: absolute;
		left: 50%;
		bottom: 160px;
		transform: translateX(-50%);
		&:hover {
			border: 1px solid #fff;
			color: #fff;
		}
		&:active {
			border: 1px solid #fff;
			color: #fff;
		}
	}
}

@media screen and (max-width: 768px) {
	.error-page {
		background: none;
		background-color: #000;
		overflow: hidden;
	}
	.text {
		display: none;
	}
	.text-mt {
		display: flex !important;
		flex-direction: column;
		margin-top: 216px;
		span {
			&:nth-child(1) {
				color: #fff;
				text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
				font-family: JetBrains Mono;
				font-size: 120px;
				font-style: normal;
				font-weight: 800;
				line-height: normal;
				text-align: center;
			}
			&:nth-child(2) {
				color: var(--1, #fff);
				text-align: center;
				font-family: Urbanist;
				font-size: 28px;
				font-style: normal;
				font-weight: 600;
				letter-spacing: 2.8px;
			}
			&:nth-child(3) {
				color: var(--1, #fff);
				text-align: center;
				font-family: Urbanist;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				letter-spacing: 1.2px;
			}
		}
	}
	.home-btn {
		text-align: center;
		font-family: Play-Regular;
		font-size: 16px;
		font-style: normal;
		width: 294px;
		height: 44px;
		line-height: 44px;
		position: absolute;
		left: 50%;
		bottom: 160px;
		transform: translateX(-50%);
	}
}
</style>
